<template>
  <el-table
    class="table"
    :data="tableData"
    border
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      v-if="isselection"
      type="selection"
      class="cell"
      width="80"
    ></el-table-column>
    <template v-for="(item, index) in tableList" :key="index">
      <el-table-column
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :fixed="item.fixed"
        :sortable="item.sortable"
      >
        <!-- 插槽开关 -->
        <template v-if="item.switch" #default="scope">
          <el-switch
            v-model="scope.row[item.prop as keyof typeof scope.row]"
            class="ml-2"
            size="large"
            :active-value="1"
            :inactive-value="0"
            @change="handleCheckboxChange(scope.row)"
            style="--el-switch-on-color: #333; --el-switch-off-color: #999"
          />
        </template>
        <!-- 缩略图 -->
        <template v-if="item.img" #default="scope">
          <img
            class="page-table-img"
            :src="scope.row[item.prop as keyof typeof scope.row]"
            @click="enlargeImage(scope.row)"
            alt=""
          />
        </template>
      </el-table-column>
    </template>

    <el-table-column v-if="isSite" fixed="right" label="功能" width="120">
      <template #default="scope">
        <el-button
          type="primary"
          :icon="Edit"
          @click="handleEditClick(scope.row)"
          circle
        />
        <el-button
          type="danger"
          :icon="Delete"
          @click="handleDelClick(scope.row)"
          circle
        />
      </template>
    </el-table-column>
  </el-table>
  <!-- 图片放大 -->
  <EnlargeImage
    :visible="flag"
    :list="image"
    :title="title"
    @closeImage="close"
  >
  </EnlargeImage>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElTable, ElTableColumn, ElButton } from "element-plus";
import { Delete, Edit } from "@element-plus/icons-vue";
import EnlargeImage from "@/components/enlarge-image/index.vue";
import { IAddressForm } from "@/libs/type/address";

interface ItableList {
  prop?: string;
  label?: string;
  // 固定 接收 left right
  fixed?: string;
  width?: number;
  sortable?: boolean;
  switch?:boolean
  img?:boolean
}

const props = defineProps({
  isselection: {
    type: Boolean,
    default: false,
  },
  isSite: {
    type: Boolean,
    default: false,
  },
  switch:{
    type: Boolean,
    default: false,
  },
  isPagination: {
    type: Boolean,
    default: false,
  },
  tableData: {
    type: Array,
    default: [],
  },
  tableList: {
    type: Array<any>,
    default: [],
  },
});

const flag = ref(false);
const image = ref([]);
const title = ref("");

const emits = defineEmits([
  "handleEditClickEmit",
  "handleDleClickEmit",
  "handleSelectionChangeEmit",
  "handleCheckboxChangeEmit"
]);

const handleEditClick = (info: any) => {
  emits("handleEditClickEmit", info);
};

const handleDelClick = (info: any) => {
  emits("handleDleClickEmit", info);
};

const handleSelectionChange = (list: []) => {
  emits("handleSelectionChangeEmit", list);
};

//插槽开关
const handleCheckboxChange=(obj:IAddressForm)=>{
  // console.log(obj);
  emits("handleCheckboxChangeEmit",obj)
}

// 放大图片
const enlargeImage = (item: any) => {
  image.value = item.image_list;
  flag.value = true;
  title.value = item.title;
};
// 关闭放大图片
const close = () => {
  flag.value = false;
};
</script>

<style scoped lang="scss">
.page-table-img {
  width: 100%;
  cursor: pointer;
}
</style>
